<!--
 * @Author: 'hongjilin' 'https://gitee.com/hongjilin'
 * @LastEditors: 'hongjilin' 'https://gitee.com/hongjilin'
-->
<template>
  <div class="item-list-box">
    <div
      class="clip-item"
      v-for="(item, index) in lists"
      :key="item.createTime"
      :class="{ active: activeIndex===index }"
      @click.left="handleItemClick($event, item)"
      @click.right="handleItemClick($event, item)"
      @mouseover="handleMouseOver(index)"
    >
      <!-- 列表前面时间部分 -->
      <div class="clip-item-time">
        <span>{{formatDateToString(item.updateTime)}}</span>
      </div>
      <!-- 列表内容部分 -->
      <div class="clip-item-info">
        <div class="clip-item-info-data">
          <template v-if="item.type === 'text'">
            <div
              class="clip-item-info-data-text"
            >{{ item.data.split(`\n`).slice(0, 8).join(`\n`).trim() }}</div>
            <div
              class="btn-show-detail clip-item-info-data-text"
              @click.stop="()=>delCollectors(item)"
            >移出收藏</div>
          </template>
          <template v-if="item.type === 'image'">
            <img class="clip-item-info-data-img" :src="item.data" alt="Image" />
              <div
              class="btn-show-detail clip-item-info-data-text"
              @click.stop="()=>delCollectors(item)"
            >移出收藏</div>
          </template>
          <template v-if="item.type === 'file'">
            <item-list-file @show-details="showDetails" :info="item" :costom="true"></item-list-file>
              <div
              class="btn-show-detail clip-item-info-data-text"
              @click.stop="()=>delCollectors(item)"
            >移出收藏</div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const formatDateToString = window.formatDateToString
module.exports = {
  components: {
    ItemListFile: httpVueLoader('./lists/item-list-file.vue'),
  },
  props: {
    lists: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIndex: 0,//默认选中列表第一位
    }

  },
  mounted() {
    console.log(formatDateToString(new Date().getTime()), "utilsutilsutilsutilsutilsutils")
    this.initAddEventListenerKey()
    //初始化时聚焦
    window.focus()
  },
  methods: {
    delCollectors(item){
      const temps = this.lists.filter(list=>list.id!=item.id)
      this.lists=temps
     window.DB.updateDataBaseOnlyCollectors(temps)
    },
    //展示当前记录的详情页面
    showDetails(item) {
      this.$emit('show-details', item)
    },
    //定位当前的下标，并将其定位到界面中间
    checkActiveInCenter() {
      //为什么需要用$nextTick？  --因为vue监听数据变化并不是同步马上进行的，所以需要等这次dom渲染结束后再去进行下面的跳转操作
      this.$nextTick(() => {
        //再将当前下标数据置于界面中间
        document.querySelector('.clip-item.active') && document.querySelector('.clip-item.active').scrollIntoView({
          block: 'nearest',
          inline: 'nearest'
        })
      })
    },

    //添加监听键盘事件，同时将记录当前按下的键位 
    initAddEventListenerKey() {
      document.addEventListener('keydown', (e) => {
        const { key, ctrlKey, metaKey, altKey } = e
        //当前是否按下ctrl，存到全局中，因为多处地方会调用文件列表，所以不可以直接用父子组件传，不然耦合性太高
        window.isCtrlKey = ctrlKey || metaKey
        switch (key) {
          //当你按下键盘【↑】
          case 'ArrowUp': {
            if (this.activeIndex > 0) this.activeIndex-- //如果当前下标为0了，就不再对其进行【↑】的相关操作
            else if (this.activeIndex === 1) window.toTop() //如果当前下标为1，直接对其进行置顶操作
            else {
              //如果其他情况，就将当前选中激活的元素置于页面中间
              this.checkActiveInCenter()
            }
            break;
          }
          //当你按下了键盘【↓】
          case 'ArrowDown': {
            //要保证不能超过list长度
            if (this.activeIndex < this.lists.length - 1) {
              this.activeIndex++
              //将当前选中激活的元素置于页面中间
              this.checkActiveInCenter()
            }
            break;
          }
          //当你按下了回车键【Enter】
          case 'Enter': {
            //当你按下了回车键，按照当前的下标查找到对应的剪切板数据，同时粘贴到页面上
            window.copy(this.lists[this.activeIndex])
            window.paste()
            break;
          }
        }

      })
      //添加键盘抬起事件的监听，如果抬起键盘的时候要将原本的按钮标识还原
      document.addEventListener('keyup', (e) => {
        //只要键盘抬起，就要重置按钮标识
        window.isCtrlKey = false
      })
    },
    //鼠标移入移出事件
    handleMouseOver(index) {
      //移入时将index下标赋值到data中，用以渲染当前选中项样式
      this.activeIndex = index
    },
    //鼠标点击事件，左键点击复制+粘贴，右键只有复制
    handleItemClick(ev, item) {
      const { button } = ev
      console.log(button, '当前按钮项目')
      if (button === 0) {
        // 左键 复制后粘贴
        window.copy(item)
        window.paste()
      } else if (button === 2) {
        // 右键 仅复制
        window.copy(item)
      }
    }
  }

}
</script>
